<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="contentBox flexbetween margin_bottom3" v-for="item in list.data" :key="item.id">
			<div class="flexleft">
				<img class="imgBox margin_right1" :src="item.teacher.avatar" alt="">
				<div>
					<div class="text_ft color_three">{{item.teacher.username}}</div>
					<div class="text_d color_six margin_top">{{item.teacher.description}}</div>
				</div>
			</div>
			<div class="withdrawBox text_f color_red" @click="jiechu(item.teacher_id)">解除拉黑</div>
		</div>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		teacherblacklist,
		cancel_blacklist
	} from "@/API/system"
	export default {
		data() {
			return {
				page: 1,
				list: {
					data: []
				}
			}
		},
		created() {
			this.init()
		},
		methods: {
			jiechu(id){
				cancel_blacklist({
					teacher_id:id
				}).then(res => {
					if(res.data.code==1){
						this.$message.success(res.data.msg)
						this.tuijianchange(1)
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			init(page) {
				teacherblacklist({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		padding: 20px;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;

	}

	.imgBox {
		width: 77px;
		min-width: 77px;
		height: 77px;
		border-radius: 50%;
	}

	.withdrawBox {
		padding: 3px 10px;
		border-radius: 5px 5px 5px 5px;
		border: 1px solid #FF0000;
	}
</style>